<template>
	<div  class="box">
		<ul class="list-ul">
			<li v-for="v in listArray" :key='v.id' @click="clickIconLink(v.id,v.name)">
				<img :src="v.iconUrl+'?x-oss-process=image/resize,m_fixed,h_72,w_72'" />
				<div class="middle-text-box">
					<p class="p-top">{{v.name}}</p>
					<p class="p-bottom">{{v.shortIntro}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
        props: {
			middleIconArray: Object,
		},
		data() {
			return {
				listArray:[],
			}
		},
		computed: {},
		created() {
			this.listArray = this.middleIconArray;
		},
		watch:{
		},
		mounted() {
		},
		methods:{
			clickIconLink(id,name){
				this.$router.push({
					path: `/${this.$channel}/listComMore`,
					query: {
						id: id,
						title:name
					}
				})
			},
		}
	}
</script>

<style scoped="scoped">
	.box {
		width: 100vw;
	}
	
	.list-ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	
	.list-ul li {
		width: 50%;
		height: 123px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.list-ul li img {
		width: 72px;
		height: 72px;
		border-radius: 50%;
		margin-left: 30px;
	}
	
	.middle-text-box {
		width: 220px;
		margin-left: 24px;
		/*background: darkcyan;*/
	}
	
	.p-top {
		font-size: 29px;
		line-height: normal;
		color: #34323F;
		font-weight:700;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.p-bottom {
		/*background: saddlebrown;*/
		font-size: 21px;
		font-weight: 500;
		color: #929292;
		margin-top: 9px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>